<template>
    <n-drawer v-model:show="showDrawer" :width="1000" :close-on-esc="false" @update:show="onUpdate">
        <n-drawer-content closable>
            <template #header>
                {{ webhook.created_at }}
            </template>
            <n-log ref="logInstRef" :lines="lines" :font-size="12" :line-height="1.5" trim
                   style="height:100%;background-color: black;padding: 10px 0 10px 10px"/>
        </n-drawer-content>
    </n-drawer>
</template>
<script setup lang="ts">
import {nextTick, onBeforeUnmount, onMounted, ref, watchEffect} from "vue";
import WebSocketService from "@/utils/ws.ts";
import {getWebhookById} from "@/api/pm/webhook.ts";
const props = defineProps(['webhookId','show'])

let showDrawer = props.show
const lines = ref([])
const logInstRef = ref(null);
const webhook = ref({})

// const websocket = new WebSocketService("ws://localhost:8080/api/webhook/"+webhook.id+"/logs");

watchEffect(() => {
    if (lines.value) {
        // console.log(lines.value.length)
        // console.log(logInstRef.value)
        nextTick(() => {
            logInstRef.value?.scrollTo({ position: "bottom", silent: true });
        });
    }
});

const onUpdate = (val: boolean)=>{
    // console.log(props.show)
    showDrawer = val
    if(showDrawer){
        console.log("show")
        // websocket.connect();
    }else{
        console.log("hide")
        // websocket.close();
    }
}

onMounted(()=>{
    console.log(props.webhookId)
    // getWebhookById(props.webhookId).then(res=>{
    //     webhook.value = res.data
    //     console.log(webhook.value)
    // })
    // websocket.connect();
    // setInterval(() => {
    //         lines.value.push(new Date().toLocaleString() + ":" + randomString(20) + "\r")
    //     }, 1000
    // )
})
onBeforeUnmount(() => {
    // websocket.close();
})
</script>

<style scoped lang="scss">

</style>
